<template>
  <div class="editor-container">
    <header class="editor-header">
      <!-- 头顶区域 需要修改样式，以及其他功能去除  本页面为布局页面 -->
      <!-- <ToolBar /> -->
      <MyToolBar />
      
    </header>
    <main class="editor-main">
      <!-- 左侧边栏  已修改-->
      <PaletteBar />
      <!-- 右侧设置边栏 -->
      <ContentPad />
      <OverviewPad />
      <div class="editor-content">
        <div class="screen">
          <!-- 场景元素区域 Scenes 背景区域 可更换背景图片-->
          <ScenesCanvas :cp-style="screenStyle" />
          <!-- 元素存在区域 拖拽创建出的新图表 -->
          <ComponentsCanvas :cp-style="screenStyle" />
          <!-- 指示器区域 对拖拽创建出的新图表实现放大缩小操作-->
          <HandlersCanvas :cp-style="screenStyle" />
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, watch } from 'vue';
import { useStore } from 'vuex';
import MyToolBar from '../../components/editor-tool-bar/myToolBar.vue';
import ComponentsCanvas from '../../components/editor-canvas/ComponentsCanvas.vue';
import ScenesCanvas from '../../components/editor-canvas/ScenesCanvas.vue';
import HandlersCanvas from '../../components/editor-canvas/HanldersCanvas.vue';
import PaletteBar from '../../components/editor-palette/PaletteBar.vue';
// 右侧编辑栏，移除
import ContentPad from '../../components/editor-content-pad/ContentPad.vue';
import OverviewPad from '@/components/editor-overview-pad/OverviewPad.vue';
import type { ComputedRef } from 'vue';
import type { Store } from 'vuex';
import type { Canvas } from '@/types/canvas';
import type { StoreState } from '@/types/store';


export default defineComponent({
  name: 'Editor',
  components: {
    OverviewPad,
    PaletteBar,
    HandlersCanvas,
    ComponentsCanvas,
    ScenesCanvas,
    // ToolBar,
    MyToolBar,
    ContentPad
  },
  setup() {
    const store: Store<StoreState> = useStore();
    const canvasState: Canvas = store.state.canvas;

    const screenStyle: ComputedRef<string> = computed(() => `transform: scale(${canvasState.scale});`);
    //  获取用户的页面数据，然后刷新
    const renderPage = (): void => {
      // 页面加载， 请求数据，得到数据 ，对数据进行转换，调用store中渲染页面方法
      let data = store.state.components
      store.commit('setData',data);
      
    };
    renderPage()
    
    return {
      screenStyle,
    };
  }
});
</script>

<style lang="scss" scoped>
@import '../../assets/styles/editor-styles';
</style>
